<template>
    <div>
      <!--导航区域-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/user/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>人员管理</el-breadcrumb-item>
        <el-breadcrumb-item>我的分组</el-breadcrumb-item>
      </el-breadcrumb>

      <!--卡片视图-->
      <el-card>
        <el-table :data="myGroups" border stripe>
          <!--拓展列-->
          <el-table-column type="expand">
            <template slot-scope="scope">
              <el-row :class="['bdbottom',i1 === 0 ? 'bdtop':'','vcenter']" v-for="(item,i1) in scope.row.userChildrenList" :key="i1">
                <!--渲染一级数据,区域占5列-->
                <el-col :span="5">
                  <el-tag effect="plain">{{item.userAuthority}}</el-tag>
                  <i class="el-icon-caret-right"></i>
                </el-col>
                <!--渲染二级三级数据-->
                <el-col :span="19">
                  <!--通过for循环渲染二级数据-->
                  <el-row :class="[i2 === 0 ? '':'bdtop','vcenter']" v-for="(item2,i2) in item.userInfos" :key="item2.userName"><!--以名字未唯一键-->
                    <el-col :span="6">
                      <el-tag type="success" effect="plain">{{item2.userName}}</el-tag>
                      <i class="el-icon-caret-right"></i>
                    </el-col>
                    <el-col :span="18">
                      <el-tag type="danger" v-for="(item3,i3) in item2.userInfoList" :key="item3.userId" effect="plain"><!--以学号为唯一键-->
                        {{item3.userId}}(学号)
                      </el-tag>
                      <el-tag type="danger" v-for="(item4,i4) in item2.userInfoList" :key="item4.phone" effect="plain"><!--以电话为唯一键-->
                        {{item4.code}}(码云账号)
                      </el-tag>
                      <el-tag type="danger" v-for="(item5,i5) in item2.userInfoList" :key="Date.now()" effect="plain"><!--以时间为唯一键-->
                        {{item5.phone}}(电话)
                      </el-tag>
                    </el-col>
                  </el-row>

                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <!--索引列-->
          <el-table-column type="index" label="#"></el-table-column>

          <el-table-column label="组编号">
            <template slot-scope="scope">
              <span style="color:#67C23A" size="medium"><i class="el-icon-s-opportunity"></i>{{ scope.row.groupId }}</span>
            </template>
          </el-table-column>

          <el-table-column label="组名">
            <template slot-scope="scope">
               <span style="color:#409EFF"><i class="el-icon-s-home"></i>{{scope.row.groupName}}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="quitGroup(scope.row.groupName)">
                退出该组
              </el-button>
            </template>

          </el-table-column>


        </el-table>

      </el-card>

    </div>
</template>

<script>
    export default {
        name: "MyGroup",
      data(){
          return{
            myGroups: []
          }
      },
      created() {
          this.getMyGroups();
      },
      methods: {
        //获取我加入的分组
        async getMyGroups(){
          var userInformation = JSON.parse(window.sessionStorage.getItem("user"));
          const {data: res} = await this.$http.get(`group/getMyGroupsAndOtherInfo/${userInformation.userId}`);
          console.log(res);
          if (res.status !== 200){
            return this.$message.error(res.msg);
          }
          this.myGroups = res.data;
        },
        //退出项目组
        async quitGroup(groupName){
          var userInformation = JSON.parse(window.sessionStorage.getItem("user"));
          const confirmResult = await this.$confirm('是否确定退出该组?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(err => {
            return err;
          });
          //当用户确认时，则返回值为字符串：confirm
          //取消时，返回字符串cancel
          if (confirmResult !== 'confirm'){
            return this.$message.info("已取消操作")
          }
          //发送delete请求
          const {data: res} = await this.$http.delete('group/deleteGroup/' + userInformation.userId + '/' + groupName);
          console.log(res);
          if (res.status !== 200){
            return this.$message.error(res.msg);
          }
          this.getMyGroups();
          return this.$message.success(res.msg);
        }
      }
    }
</script>

<style scoped lang="scss">
  .el-tag{
    margin: 7px;
  }
  .bdtop{
    border-top: 1px solid #EEEEEE;
  }
  .bdbottom{
    border-bottom: 1px solid #EEEEEE;
  }
  .vcenter{
    display: flex;
    align-items: center;
  }

</style>
